<template>
  <div class="commit-test">
    <el-skeleton :loading="false" animated>
      <el-card>
        <template #header>
          <div class="h-3 flex justify-between">
            <span>测试服务</span>
          </div>
        </template>
        <p>测试专家依据企业需求，为您的产品定制测试方案，测试团队为您提供专业的测试服务</p>
        <el-button @click="handleQuery" type="primary">
          <Icon class="mr-5px" icon="ep:edit" />
          立即咨询
        </el-button>
      </el-card>
    </el-skeleton>
    <el-skeleton :loading="loading" animated>
      <el-card class="mt-8px">
        <template #header>
          <div class="h-3 flex justify-between">
            <span>请选择提测的服务</span>
          </div>
        </template>
        <el-row v-for="item of items" :key="item.label" class="mb-8px">
          <el-col :xl="2" :lg="2" :md="2" :sm="2" :xs="2" class="slide">{{ item.name }}</el-col>
          <el-col :xl="4" :lg="4" :md="4" :sm="4" :xs="4" class="mr-8px" v-for="i of item.testItems" :key="i.label">
            <el-card shadow="hover">
              <div class="mb-5px">{{i.name}}</div>
              <el-button @click="handleCommit(i.name)" type="primary" link>
                提测
              </el-button>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </el-skeleton>
    <ConsultForm ref="consultFormRef" />
    <CommitForm ref="commitFormRef" />
  </div>
</template>

<script setup lang="ts">
import * as TestCommitApi from '@/api/commit'
import ConsultForm from './consultForm.vue'
import CommitForm from './commitForm.vue'
const loading = ref(false)
const consultFormRef = ref()
const commitFormRef = ref()
const items = ref([] as any)
// 立即咨询
const handleQuery = () => {
  consultFormRef.value.open()
}
// 提测
const handleCommit = (name) => {
  commitFormRef.value.open(name)
}
// 提测服务
const getTestItems = async () => {
  let res = await TestCommitApi.getTestItems()
  items.value = res
}

getTestItems()
</script>

<style scoped>
.slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

</style>
